import { ref, computed } from 'vue'
import { fetchMemes, searchMemes, fetchLatestMemes, fetchPopularMemes } from '../api/memes'

export function useMemes() {
  const memes = ref([])
  const isLoading = ref(false)
  const error = ref(null)
  const page = ref(1)
  const totalPages = ref(0)
  const searchQuery = ref('')
  const searchTag = ref('')

  const hasMemes = computed(() => memes.value.length > 0)
  const hasNextPage = computed(() => page.value < totalPages.value)

  async function loadMemes({ reset = false } = {}) {
    if (reset) page.value = 1
    if (isLoading.value) return
    
    isLoading.value = true
    error.value = null
    
    try {
      const response = await fetchMemes({ page: page.value })
      
      if (reset) memes.value = response.data.memes
      else memes.value = [...memes.value, ...response.data.memes]
      
      totalPages.value = response.data.totalPages
      page.value++
    } catch (err) {
      error.value = 'Failed to load memes'
      console.error(err)
    } finally {
      isLoading.value = false
    }
  }

  async function loadLatestMemes() {
    if (isLoading.value) return
    
    isLoading.value = true
    error.value = null
    
    try {
      const response = await fetchLatestMemes()
      memes.value = response.data.memes
    } catch (err) {
      error.value = 'Failed to load latest memes'
      console.error(err)
    } finally {
      isLoading.value = false
    }
  }

  async function loadPopularMemes() {
    if (isLoading.value) return
    
    isLoading.value = true
    error.value = null
    
    try {
      const response = await fetchPopularMemes()
      memes.value = response.data.memes
    } catch (err) {
      error.value = 'Failed to load popular memes'
      console.error(err)
    } finally {
      isLoading.value = false
    }
  }

  // 执行搜索的函数，不再使用防抖
  async function executeSearch() {
    if (!searchQuery.value.trim()) return
    if (isLoading.value) return
    
    isLoading.value = true
    error.value = null
    page.value = 1
    
    try {
      const response = await searchMemes({ query: searchQuery.value })
      
      const data = response.data
      const memeData = data.memes || []
      const pagination = data.pagination || { totalPages: 0 }
      
      memes.value = memeData
      totalPages.value = pagination.totalPages
      
      if (memeData.length === 0) {
        error.value = `没有找到包含关键词 "${searchQuery.value}" 的表情包`
      }
    } catch (err) {
      error.value = 'Search failed'
      console.error(err)
    } finally {
      isLoading.value = false
    }
  }

  // 直接调用搜索，不再使用防抖
  function search(query) {
    searchQuery.value = query
    searchTag.value = query
    executeSearch() // 直接执行搜索，不使用防抖
  }
  
  // 通过标签搜索，与普通搜索合并
  function searchByTag(tag) {
    if (!tag) return
    searchQuery.value = tag
    searchTag.value = tag
    executeSearch() // 直接执行搜索，不使用防抖
  }

  return {
    memes,
    isLoading,
    error,
    page,
    totalPages,
    searchQuery,
    searchTag,
    hasMemes,
    hasNextPage,
    loadMemes,
    loadLatestMemes,
    loadPopularMemes,
    search,
    searchByTag
  }
} 